<template>
  <div :class="['MenDianfsPanel',showOrHideCls]">
    <div class="view">
      <router-view >

      </router-view>
    </div>
  </div>
</template>


<style scoped>
.MenDianfsPanel{
  position: relative;background: #F6F8E3;
}

.view{
  font-size: 16px;margin: auto;
 /* max-width: 1200px;min-width: 1200px;*/
}

</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';
import Enum from "@/js/Enum";


let store = useStore();
let router = useRouter();
let routerData = useRoute();
onMounted(() => {
  console.log("MenDianfsPanel onMounted 门店风采一级页面 初始化");
  store.state.channelId=Enum.cId_4;
  if(routerData.query.id==null){
    store.state.mendDPages.url=Enum.mendfc_list;
  }else{
    store.state.mendDPages.url=Enum.mendfc_details;
    store.state.mendDPages.data={id:routerData.query.id};
  }
  store.state.mendDPages.status++;
  getSrsData();
});


onBeforeUnmount(() => {
  console.log('MenDianfsPanel onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("MenDianfsPanel onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');
let pagesState=computed(()=>{return store.state.mendDPages.status;});
watch(pagesState,(newValue,oldValue)=>{
  console.log("MenDianfsPanel watch  pagesState ",store.state.mendDPages.data.id);
  router.push({ path:store.state.mendDPages.url, query: store.state.mendDPages.data});
});

let getSrsData=()=>{
  if(store.state.mendianData===null){
    $.ajax({
      url: store.state.data_url+'api/getChannelListById',
      type: 'GET',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"channelId":Enum.cId_4},
      success: function(data) {
        console.log("MenDianfsPanel  门店展示",data);
        store.state.mendianData=(data.content.list[0].levelList.length>0?data.content.list[0].levelList:data.content.list[0].datalist);

      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });
  }
}

</script>




